<template>
    <div class="analysis-region page-container">
        <el-row class="analysis-region_row header">
            <span class="text">销售数据</span>
            <!--<i class="el-icon-question"></i>-->
        </el-row>
        <el-row class="analysis-regionanalysis-region_row analysis-region_row--filter" type="flex">
            <el-select class="filter-item" v-model="queryParameter.category" placeholder="品类" clearable>
                <el-option
                        v-for="{ value, label } in options.category"
                        :key="value"
                        :label="label"
                        :value="value">
                </el-option>
            </el-select>
            <el-select class="filter-item" v-model="queryParameter.model" placeholder="销售型号" clearable>
                <el-option
                        v-for="{ value, label} in options.model"
                        :key="value"
                        :label="label"
                        :value="value">
                </el-option>
            </el-select>
            <el-select class="filter-item" v-model="queryParameter.province"
                       placeholder="省" clearable>
                <el-option
                        v-for="{ value, label } in options.province"
                        :key="value"
                        :label="label"
                        :value="value">
                </el-option>
            </el-select>
        </el-row>
        <el-row class="analysis-region_row analysis-region_row--filter" type="flex">
            <el-radio
                    class="filter-item"
                    v-for="{label, value} in dateOption"
                    v-model="dateRange"
                    :key="value"
                    :label="value"
                    @change="handleDateChange"
                    border>
                {{label}}
            </el-radio>
            <el-date-picker
                    v-show="showDateRangePicker"
                    class="filter-item"
                    v-model="queryParameter.dateRange"
                    type="daterange"
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                    :clearable="false"
                    :value-format="dateFormat">
            </el-date-picker>
        </el-row>
        <el-row class="analysis-region_row analysis-region_row--shipment">
            <el-card class="box-card">
                <el-row type="flex" justify="space-between" align="middle" slot="header">
                    <span class="title">关键指标</span>
                </el-row>
                <el-row type="flex" class="card-content">
                  <ChartShipment type="day" :queryData="queryParameter" class="chart-item day" style="min-height: 30vh;" />
                  <ChartShipment type="month" :queryData="queryParameter" class="chart-item month" style="min-height: 30vh;" />
                </el-row>
            </el-card>
        </el-row>
        <el-row class="analysis-region_row analysis-region_row--intel-sale-ratio">
            <el-card class="box-card">
                <IntelSaleRatio :queryData="queryParameter" class="card-content" />
            </el-card>
        </el-row>
        <el-row class="analysis-region_row analysis-region_row--intel-sale-ratio">
            <el-card class="box-card">
                <RegionDistribution :queryData="queryParameter" class="card-content" />
            </el-card>
        </el-row>
    </div>
</template>

<script>
// import moment from 'moment'
import ChartShipment from './chart-shipment'
import IntelSaleRatio from './intel-sale-ratio'
import RegionDistribution from './region-distribution'
import { commonMixin as dateMixin } from '@/mixins/user-analysis'
import { commonMixin } from '@/mixins/client-analysis/'
import { getCategory, getProvinceList } from '@/utils/getSeletorData'

export default {
  name: 'AnalysisRegion',
  components: { ChartShipment, IntelSaleRatio, RegionDistribution },
  mixins: [dateMixin, commonMixin],
  data () {
    return {
      options: {
        category: getCategory(),
        model: '',
        province: ''
      },
      queryParameter: {
        dateRange: null,
        category: undefined,
        sn8: undefined,
        province: undefined
      }
    }
  },
  created () {
    this.init()
  },
  methods: {
    init () {
      this._getDeviceProductModelList()
      this._getProvinceList()
    },
    async _getDeviceProductModelList () {
      const { data: { data = [] } } = await this.$http
        .get(this.getApiUrl('dataanalysis_iot/sale/getDeviceProductModelList', false))
      this.options.model = data.map((item) => {
        return {
          label: item,
          value: item
        }
      })
    },
    async _getProvinceList () {
      this.options.province = await getProvinceList.call(this)
    }
  }
}
</script>

<style lang="scss" scoped>
    @import "~element-theme-chalk/src/common/var.scss";
    @import "@/assets/scss/modules/variables-module.scss";
    @import "@/assets/scss/modules/common-module.scss";

    .page-container {
        @include layout-header;

        .analysis-region_row {
            & ~ .analysis-region_row {
                margin-top: $gap-big;
            }

            .box-card {
                & + .box-card {
                    margin-top: 0;
                    margin-left: $gap-default;
                }

                .title {
                    font-weight: bolder;
                    font-size: 145%;
                }
                .card-content {
                    position: relative;
                }
            }
        }

        .analysis-region_row--filter {
            @include filter-row;
        }

        .analysis-region_row--shipment {
            .day {
                flex-basis: 70%;
            }
            .month {
                flex-basis: 30%;
            }
        }
    }
</style>
